import 'package:aidou/style/style.dart';
import 'package:flutter/material.dart';

class VideoCommentBottomSheet extends StatelessWidget {
  const VideoCommentBottomSheet({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    List<String> commentList = [
      '这是一条平乱，欢迎来评论',
      'bug太多，越写越多',
      '烂尾楼内搞装修————千疮百孔，666666'
    ];
    return Container(
      margin: EdgeInsets.zero,
      decoration: BoxDecoration(
        color: ColorPlate.back1,
        borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
      ),
      child: Stack(
        children: <Widget>[
          Positioned(
            top: 10.0,
            right: 12.0,
            child: InkResponse(
              child: Icon(
                Icons.close,
                color: Colors.white,
              ),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ),
          Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.all(4),
                height: 4,
                width: 32,
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
              Container(
                height: 24,
                alignment: Alignment.center,
                child: Text(
                  '128条评论',
                  style: StandardTextStyle.smallWhite,
                ),
              ),
              Expanded(
                child: ListView(
                  physics: AlwaysScrollableScrollPhysics(
                    parent: BouncingScrollPhysics(),
                  ),
                  children: commentList
                      .map((value) => _CommentRow(
                            value: value,
                          ))
                      .toList(),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _CommentRow extends StatelessWidget {
  final value;
  const _CommentRow({
    Key? key,
    this.value,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 评论内容
    var info = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          '我是END',
          style: StandardTextStyle.smallWithOpacity,
        ),
        Container(height: 2),
        Text(
          value,
          style: StandardTextStyle.normal,
        ),
      ],
    );
    // 右侧点赞数
    Widget right = Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Icon(
          Icons.favorite,
          color: Colors.white60,
        ),
        Text(
          '66',
          style: StandardTextStyle.smallWithOpacity,
        ),
      ],
    );
    // 用户头像
    var avatar = Container(
      margin: EdgeInsets.fromLTRB(0, 8, 10, 8),
      child: Container(
        height: 36,
        width: 36,
        child: ClipOval(
          child: Image.network(
            'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      child: Row(
        children: <Widget>[
          avatar,
          Expanded(child: info),
          right,
        ],
      ),
    );
  }
}
